<template>
  <view class="popup">
    <m-overlay
      :visible="visible"
      :width="width"
      :height="height"
      :position="position"
      :closeable="closeable"
      :background="background"
      :overlay="overlay"
      :overlay-background="overlayBackground"
      :close-on-click-overlay="closeOnClickOverlay"
      :close-icon-position="closeIconPosition"
      :close-color="closeColor"
      :close-icon="closeIcon"
      :close-icon-size="closeIconSize"
      :z-index="zIndex"
      :push="push"
      @close="handleClose"
      @scrolltolower="handleScrolltolower"
    >
      <view v-if="$slots.header || title" slot="header" class="popup__title">
        <slot v-if="$slots.header" name="header" />
        <view v-else>
          {{ $t(title) }}
          <view class="popup__subtitle">
            {{ $t(subTitle) }}
          </view>
        </view>
      </view>
      <view v-if="$slots.body">
        <slot name="body" />
        <m-safe-bottom />
      </view>
      <view v-else class="popup__content" :class="{ 'popup__content--has-header': $slots.header || title }">
        <slot />
      </view>
      <view v-if="$slots.footer" slot="footer" class="popup__footer">
        <slot name="footer" />
        <m-safe-bottom />
      </view>
    </m-overlay>
  </view>
</template>

<script lang="ts">
import { defineComponent, watch } from '@vue/composition-api'

export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    background: {
      type: String,
      default: '#fff',
    },
    overlay: {
      type: Boolean,
      default: true,
    },
    closeOnClickOverlay: {
      type: Boolean,
      default: true,
    },
    overlayBackground: {
      type: String,
      default: 'rgba(0, 0, 0, 0.6)',
    },
    position: {
      type: String,
      default: 'bottom',
    },
    width: {
      type: [String, Number],
      default: '100%',
    },
    height: {
      type: [String, Number],
      default: '100%',
    },
    round: {
      type: Boolean,
      default: true,
    },
    closeable: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: '',
    },
    subTitle: {
      type: String,
      default: '',
    },
    closeIconPosition: {
      type: String,
      default: 'top-right',
    },
    closeColor: {
      type: String,
      default: '#666',
    },
    closeIcon: {
      type: String,
      default: 'close',
    },
    closeIconSize: {
      type: [Number, String],
      default: 40,
    },
    zIndex: {
      type: [Number, String],
      default: 999,
    },
    push: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['update:visible', 'close', 'open', 'scrolltolower'],
  setup(props, { emit }) {
    const handleClose = () => {
      emit('update:visible', false)
      emit('close')
    }
    const handleScrolltolower = () => {
      emit('scrolltolower')
    }

    watch(
      () => props.visible,
      (value) => {
        if (value) {
          emit('open')
        }
      },
      { immediate: true }
    )

    return { handleClose, handleScrolltolower }
  },
})
</script>
<style lang="scss" scoped>
.popup {
  &__title {
    margin: 28rpx 0;
    @include fz32;
  }
  &__subtitle {
    text-align: center;
    font-size: 24rpx;
    font-weight: 400;
    color: $--font-secondary-c;
  }
  &__content {
    padding: 24rpx;
    &--has-header {
      margin-top: 0;
    }
  }
  &__footer {
    border-top: 1rpx solid $--line-c;
    padding: 13rpx 24rpx;
  }
}
</style>
